<template>
  <div class="purchase_view">
    <!-- 添加或修改申请采购明细对话框 -->
    <el-button class="active" type="text" @click="handleAdd">委托领取人员</el-button>
    <el-dialog :visible.sync="open" title="委托领取" width="500px" append-to-body>
      <el-form ref="form" :model="form" label-width="190px" :rules="rules" style="margin-top: -20px">
        <el-form-item label="(工)学号" prop="employeeNo" label-width="100px">
            <el-input v-model="form.employeeNo" @blur="searchUser"
            @keyup.enter.native="searchUser" placeholder="请输入(工)学号"/>
        </el-form-item>
        <el-form-item label="姓名" prop="nickName" label-width="100px">
            <el-input v-model="form.nickName" disabled placeholder="自动带入"/>
        </el-form-item>
        <el-form-item label="手机" prop="phonenumber" label-width="100px">
            <el-input v-model="form.phonenumber" placeholder="自动带入"/>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { searchEmployee } from "@/api/labdata/employee";
export default {
  name: "AuthorizeItem",
  data() {
    return {
      open: false,
      // 表单参数
      form: {},
      rules: {
        employeeNo: {required: true, message: '请输入(工)学号', trigger: 'blur'},
        nickName: {required: true, message: '请输入姓名', trigger: 'blur'},
        phonenumber: {required: true, message: '请输入手机', trigger: 'blur'}
      }
    };
  },
  props: {
    index: String
  },
  created() {
  },
  methods: {
    searchUser() {
      if (!this.form.employeeNo) {
        this.form.employeeNo = null;
        return;
      }
      searchEmployee(this.form.employeeNo).then(response => {
        let searchResult = response.data;
        if (searchResult) {
          this.form.employeeNo = searchResult.employeeNo;
          this.form.nickName = searchResult.nickName;
          this.form.phonenumber = searchResult.phonenumber
        } else {
          this.form.employeeNo = null
          this.form.applyTeacherName = null;
          this.form.phonenumber = null;
        }
        //强制刷新
        this.$forceUpdate();
      });
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        employeeNo: null,
        nickName: null,
        phonenumber: null
      };
      this.resetForm("form");
      this.open = false
    },
    submitForm(e) {
        this.$refs['form'].validate((valid)=> {
            if (valid) {
              this.open = false;
              this.$emit("change-entrusted", this.form, this.index);
            }
        })
    }
  }
};
</script>

<style scoped>
    .el-button.active{
    text-decoration: underline;
    color: #0000ee;
    margin-left: 15px;
  }
  .dialog-footer {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
  }
</style>